<template>
    <Teleport to=".sdy-header">
        <van-nav-bar  :title="title" :left-arrow="back">
            <template #left>
            <slot name="left">
                <van-icon class="left-icon" @click="leftHandler"  name="arrow-left" />
            </slot>
            </template>
            <template #title>
            <slot name="title">{{title}}</slot>
            </template>
            <template #right>
            <slot name="right"></slot>
            </template>
        </van-nav-bar>
    </Teleport>
</template>

<script setup lang="ts">
import {defineProps, Teleport} from 'vue'
import {useRouter, type Router } from 'vue-router'


interface MyTopBar {
title: string,
back?: boolean
}

defineProps<MyTopBar>()

const $router: Router = useRouter()
const leftHandler =() =>{
    console.log($router)
    $router.go(-1)
    // $router.push('/search')
}

</script>



<style scoped lang="scss">
@import '@/style/vant.scss';

//覆盖样式
//样式穿透 ， 让该样式离开 当前组件
//写一个 scoped  是为了让样式在自己组件内生效
//单有的不在当前组件内

//方法一： 去掉 style 标签身上 的  scoped 属性
// 这样样式都公开了，不太好

//方法二： 让该样式穿透出去 ， 使用  ：：v-deep  伪类作为父级

:deep(.van-nav-bar__content){
    background-color:$globalColor;
}
.left-icon{
    font-size: 24px;
    color: blue;
} 

</style>